<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Vue 3 组件基础</title>
</head>
<body>
<div id="app">
    <!-- 使用 CounterComponent 多次 -->
    <counter-component></counter-component>
    <counter-component></counter-component>
    <counter-component></counter-component>
</div>

<!-- 引入 Vue.js 和组件定义文件 -->
<script src="/assets/vue/vue3.js"></script>
<script src="/site/js/component/counter.js"></script>
<script>
    //
    // 创建 Vue 应用实例
    //
    const { createApp, onMounted } = Vue;

    const app = createApp({
        // 使用局部注册的方式注册组件
        // Note: 这里手动添加组件到当前应用中。
        components: {
            CounterComponent // 注册 CounterComponent
        },
        setup() {
            // 生命周期钩子，用于检测组件挂载
            onMounted(() => {
                console.log('组件已挂载');
            });
        },
    });

    //
    // 使用全局注册（可选）
    //
    // 如果你希望全局注册组件，就取消下面代码的注释：
    // registerGlobalComponents(app);

    // 挂载 Vue 应用到页面上的 #app 容器
    app.mount('#app');
</script>
</body>
</html>